@import "common";
@import "reset";
#nav > li{
    height:38px;
    width:115px;
    float:left;  
    line-height:38px;
    font-size:14px;
    font-weight:600; 
    text-align:center;
    &:hover a{
        color:#008842;
    }
    a{
        color:#000;
    }
}
#navbox{
    width:100%;
    background:#f7f8f8;
    #nav{
        width:1200px;
        height:37px;
        border-bottom:1px solid #008842;
        margin:0 auto;
        position:relative;
        #list{
            width:180px;
            background:#008842;
            color:#fff;
            position:relative;
            z-index:7;
            .hide{
                display:none;
            }
            #list1{
                height:100%;
                width:100%;
                font-size:15px;
                display:inline-block;
                i{
                    display:inline-block;
                    height:0;
                    width:0;
                    border-top:10px solid #fff;
                    border-left:5px solid transparent;
                    border-right:6px solid transparent;
                    border-bottom:none;
                    margin-left:2px;
                }
            }
            ul{
                width:180px;
                background:rgba(255,255,255,0.95);
                position:absolute;  
                left:0;
                top:38px;
                display:none;
                li{
                    height:42px;
                    span{
                        display:inline-block;
                        height:35px;
                        width:46px;
                        float:left;
                        background:url(../img/floor_guide.png) no-repeat;
                    }
                    p{
                        display:inline-block;
                    }
                    a{
                        float:left;
                        display:inline-block;
                        padding:3px 0 0 7px;
                        color:#000;
                        font-weight:100;
                        font-family:"微软雅黑";
                        position:relative;
                        b{
                            height:40px;
                            width:26px;
                            text-align:left;
                            background:#fff;
                            position:absolute;
                            left:153px;
                            top:0;
                            z-index:20;
                            display:none;
                        }
                    }
                    div{
                        height:490px;
                        width:180px;
                        border:1px solid #bbb;
                        position:absolute;
                        left:179px;
                        top:-38px;
                        padding:8px 55px 0 20px;
                        background:rgba(255,255,255,0.95);
                        display:none;
                        text-align: left;
                        h3{
                            font-size:18px;
                            line-height:44px;
                            width:180px;
                            a{
                                font-size:18px;
                                line-height:44px;
                                color:#008842;
                                text-decoration:underline;
                                padding:0;
                                margin:0;
                            }
                        }
                        a{
                            float:none;
                            margin-right:32px;
                            padding:0;
                            color:#000;
                            line-height:24px;
                            font-size:12px;
                        }
                        a:hover{
                            color:#008842;
                        }
                        img{
                            position:absolute;
                            top:268px;
                            left:20px;
                        }
                    }  
                }
                li:hover{
                    height:40px;
                    border:1px solid #bbb;
                    border-right:none;
                    background:#fff;
                    a{
                        padding-top:2px;
                        b{
                            display:inline-block;
                        }
                    }
                    div{
                        display:block;
                    }
                }
                li:nth-of-type(2) span{
                    background-position:-40px 0;
                }
                li:nth-of-type(3) span{
                    background-position:-80px 0;
                }
                li:nth-of-type(4) span{
                    background-position:-120px 0;
                }
                li:nth-of-type(5) span{
                    background-position:-440px 0;
                }
                li:nth-of-type(6) span{
                    background-position:-200px 0;
                }
                 li:nth-of-type(7) span{
                    background-position:-240px 0;
                }
                 li:nth-of-type(8) span{
                    background-position:-280px 0;
                }
                 li:nth-of-type(9) span{
                    background-position:-320px 0;
                }
                 li:nth-of-type(10) span{
                    background-position:-360px 0;
                } 
                li:nth-of-type(11) span{
                    background-position:-400px 0;
                }
                 li:nth-of-type(12) span{
                    background-position:-160px 0;
                }
            }
        }
        #list:hover{
            & > ul{
                display:block;
            }
        }
    }
}
#contentbox{
    background:#f7f8f8;
    width:100%;
    #content{
        width:1200px;
        margin:0 auto;
        padding-bottom:90px;
        #link{
            height:34px;
            width:100%;
            float:left;
            line-height:34px;
            a{
                padding:0 13px;
                color:#000;
            }
            a:hover{
                color:#008742;
            }
        }
        #pic{
            float:left;
            height:500px;
            width:500px;
            background:#fff;
            margin-bottom:10px;
        }
        #information{
            height:500px;
            width:680px;
            padding-left:20px;
            float:left;
            margin-bottom:10px;
            h2{
                font-size:26px;
                color:#444;
                line-height:38px;
            }
            h3{
                font-size:16px;
                color:#777;
                line-height:26px;
                margin-bottom:37px;
            }
            h4{
                height:90px;
                width:655px;
                background:#fff;
                font-size:34px;
                line-height:60px;
                color:#ff0000;
                padding-left:25px;
                margin-bottom:30px;
                span{
                    font-size:12px;
                    color:#444;
                }
                i{
                    font-size:14px;
                    font-weight:700;
                    padding-right:5px;
                }
                div{
                    float:right;
                    width:103px;
                    text-align:center;
                    font-size:12px;
                    line-height:22px;
                    padding-top:10px;
                    color:#999;
                    em{
                        font-size:18px;
                        color:#e8380d;
                        padding-right:3px;
                    }
                }
            }
            #shop{
                width:520px;
                display:inline-block;
                border-top:1px dashed #d9d9d9;
                padding-left:10px;
                h5{
                    height:55px;
                    margin:25px 0 15px 0;
                    i{
                        line-height:42px;
                        float:left;
                    }
                    div{
                        height:55px;
                        width:66px;
                        float:left;
                        margin-left:30px;
                        span{
                            height:26px;
                            width:64px;
                            float:left;
                            text-align:center;
                            line-height:26px;
                            background:#fff;
                            border:1px solid #008842;
                        }
                        span:nth-of-type(1){
                            border-bottom:none;
                        }
                    }
                }
                h6{
                    line-height:34px;
                    color:#999;
                    margin-bottom:13px;
                    i{
                        color:#008842;
                    }
                    img{
                        vertical-align: middle;
                        margin:-3px 3px 0 0;
                    }
                }
                #addshop{
                    height:43px;
                    line-height:42px;
                    span{
                        height:42px;
                        line-height:42px;
                        float:left;
                    }
                    #num{
                        float:left;
                        height:39px;
                        width:56px;
                        text-align:center;
                        border:1px solid #e2e2e2;
                        background:#fff;
                        margin:0 28px 0 22px;
                        input{
                            height:39px;
                            width:39px;
                            line-height:39px;
                            float:left;
                            border:none;
                            text-align:center;
                            border-right:1px solid #e2e2e2;
                            outline: none;
                        }
                        i:nth-of-type(1){
                            height:19px;
                            width:16px;
                            line-height:18px;
                            float:right;
                            cursor: pointer;
                            border-bottom:1px solid #e2e2e2;
                        }
                        i:nth-of-type(2){
                            height:19px;
                            width:16px;
                            line-height:18px;
                            cursor: pointer;
                            float:right;
                        }
                    }
                    #shopcar{
                        float:left;
                        height:43px;
                        width:187px;
                        font-size:18px;
                        text-align:center;
                        background:#008842;
                        color:#fff;
                    }
                }
            }
            #source{
                width:120px;
                height:250px;
                float:right;
                border-left:1px solid #d9d9d9;
                margin-top:-10px;
                padding-left:10px;
                i{
                    width:50px;
                    height:26px;
                    line-height:26px;
                    display:inline-block;
                }
                i:nth-of-type(1),i:nth-of-type(3),i:nth-of-type(5),i:nth-of-type(7){
                    width:70px;
                }
            }
        }
        .smallpic{
            height:85px;
            width:85px;
            float:left;
            border:1px solid #bcbcbc;
            margin-right:16px;
            img{
                height:100%;
                width:100%;
            }
        }
        .smallpic.borderGreen{
            border-color:#008742;
        }
        #recommend{
            height:304px;
            width:1200px;
            float:left;
            padding-top:23px;
            #like{
                height:302px;
                width:253px;
                border:1px solid #cde4c0;
                float:left;
                background:#fff;
                p{
                    height:30px;
                    width:243px;
                    background:#008842;
                    color:#fff;
                    font-weight:600;
                    line-height:30px;
                    padding-left:10px;
                }
                dl{
                    height:70px;
                    width:233px;
                    padding:10px 0;
                    border-bottom:1px dashed #dfdfdf;
                    margin-left:10px;
                    dt{
                        height:68px;
                        width:68px;
                        border:1px solid #dfdfdf;
                        float:left;
                        img{
                            height:100%;
                            width:100%;
                        }
                    }
                    dd{
                        padding-left:10px;
                        float:left;
                        h2{
                            height:46px;
                            float:left;
                            font-size:12px;
                            line-height:28px;
                            color:#777;
                        }
                        h3{
                            height:24px;
                            font-size:12px;
                            line-height:24px;
                            color:#e8380d;
                        }
                    }
                }
                dl:last-child{
                    border:none;
                }
            }
            #hot{
                width:928px;
                height:276px;
                border:1px solid #d4d4d4;
                float:left;
                margin-left:15px;
                background:#fff;
                h2{
                    font-size:14px;
                    height:36px;
                    width:900px;
                    line-height:36px;
                    color:#008842;
                    padding-left:25px;
                    float:left;
                }
                dl{
                    height:240px;
                    width:160px;
                    float:left;
                    margin:0 10px;
                    text-align: center;
                    dt{
                        height:160px;
                        width:160px;
                        img{
                            height:100%;
                            width:100%;
                        }
                    }
                    dd{
                        height:80px;
                        h2{
                            line-height:16px;
                            width:130px;
                            display:inline-block;
                            color:#777;
                        }
                        h3{
                            line-height:36px;
                            color:#e8380d;
                        }
                    }
                }
            }
        }
        #img{
            width:928px;
            float:right;
            border:1px solid #d4d4d4;
            background:#fff;
            #chose{
                height:40px;
                width:928px;
                border-bottom:1px solid #d4d4d4;
                span{
                    width:130px;
                    height:40px;
                    float:left;
                    color:#444;
                    border-right:1px solid #d4d4d4;
                    line-height:40px;
                    text-align:center;
                    position:relative;
                    background:#fff;
                    z-index:20;
                }
                span:hover{
                    color:#008842;
                }
                .show{
                    border-top:2px solid #008842;
                    top:-1px;
                }
            }
            #produc{
                width:880px;
                padding:0 24px 24px 24px;
                p{
                    height:31px;
                    width:878px;
                    border:1px solid #e1efd8;
                    margin:24px 0 20px 0;
                    span{
                        float:left;
                        width:187px;
                        height:31px;
                        line-height:30px;
                        padding-left:20px;
                        background:#ebf8f2;
                    }
                    i{
                        float:left;
                        height:31px;
                        line-height:30px;
                        padding-left:20px;
                    }
                }
                img{
                    float:left;
                    width:880px;
                }
            }
        }
    }
}
